<template>
	<view class="content">
		<view class="content-top">
			<view class='cell-group'>
				<view class='cell-item'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>实体卡卡号</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' placeholder='请填写实体卡卡号' v-model="vcard_no"></input>
					</view>
				</view>
				<!-- <view class='cell-item'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>手机号</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' placeholder='请填写收货人手机号' v-model="mobile"></input>
					</view>
				</view> -->
				<view class='cell-item'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>密码</view>
					</view>
					<view class="cell-item-bd">
						<input class="cell-bd-input" :password="true" type="text" v-model="pwd" placeholder="请输入密码" />
					</view>
				</view>



			</view>
		</view>
		<view class="button-bottom">

			<button class="btn btn-square btn-w" @click="delShip" v-if="id && id != 0" hover-class="btn-hover2" :disabled='submitStatus'
			 :loading='submitStatus'>删除</button>

			<button class="btn btn-square btn-b" @click="saveShip" hover-class="btn-hover2" :disabled='submitStatus' :loading='submitStatus'>保存</button>
		</view>
	</view>

</template>

<script>
	import areaPicker from "@/components/area-picker/areaPicker.vue";
	import CryptoUtil from '@/utils/CryptoUtil.js'
	export default {
		components: {
			areaPicker
		},
		data() {
			return {
				id: 0,
				vcard_no: '',
				pwd: '',
				name: '',
				mobile: '',
				multiArray: [
					[],
					[],
					[]
				],
				multiIndex: [110000, 110100, 110101],
				checked: false,
				pickerValue: '',
				defaultIndex: [0, 0, 0],
				submitStatus: false
			}
		},
		computed: {},
		methods: {
			// 省市区联动初始化
			showThreePicker() {
				this.$refs.areaPicker.showPicker();
			},
			onConfirm(e) {
				let province_name = e[0].name;
				let city_name = e[1].name;
				let county_name = e[2].name;
				this.pickerValue = e[0].name + " " + e[1].name + " " + e[2].name
				let data = {
					province_name: province_name,
					city_name: city_name,
					county_name: county_name
				}
				let regionName = [province_name, city_name, county_name];
				this.$api.getAreaId(data, res => {
					if (res.status) {
						this.areaId = res.data
					} else {
						uni.showModal({
							title: '提示',
							content: '',
							showCancel: false
						});
					}
				});
			},
			// 信息验证
			checkData(data) {
				this.submitStatus = false;
				if (!data.vcard_no) {
					this.$common.errorToShow('请输入实体卡卡号')
					return false
				}
				// else if (!data.mobile) {
				// 	this.$common.errorToShow('请输入手机号')
				// 	return false
				// } 
				else if (!data.pwd) {
					this.$common.errorToShow('请输入密码')
					return false
				}
				//  else if (data.mobile.length !== 11) {
				// 	this.$common.errorToShow('手机号格式不正确')
				// 	return false
				// }
				else {
					return true
				}
			},
			getVcardInfo() {
				let data = {
					token: this.$db.get('userToken'),
					method: "user.getVcardDetail",
				}
				this.$api.getVcardDetail(data, res => {

					if (res.status) {
						this.vcard_no = res.data.vcard_no;
						this.mobile = res.data.mobile;
					} else {

						this.$common.errorToShow(res.msg);
						this.submitStatus = false;
					}
				});
			},
			//编辑获取收货地址信息
			getShipInfo() {
				let data = {
					'id': this.id
				}
				this.$api.shipDetail(data, res => {
					if (res.status) {
						let region = res.data.area_name.split(" ");
						this.name = res.data.name;
						this.mobile = res.data.mobile;
						this.region = region;
						this.areaId = res.data.area_id;

						this.pickerValue = this.region[0] + " " + this.region[1] + " " + this.region[2]
						this.$refs.areaPicker.init(); //初始化插件

						this.address = res.data.address;
						this.is_def = res.data.is_def;
						if (res.data.is_def == 1) {
							this.checked = true;
						} else {
							this.checked = false;
						}
					} else {
						this.$common.errorToShow('获取信息出现问题');
						this.submitStatus = false;
					}
				});
			},

			//绑实体卡
			saveShip() {
				this.submitStatus = true;
				let data = {
					vcard_no: this.vcard_no,
					mobile: this.mobile,
					pwd: CryptoUtil.rSAEncrypt(this.pwd),
					method: "user.bindVCard",
					token: this.$db.get('userToken')
				}

				//编辑存储

				//添加
				if (this.checkData(data)) {
					this.$api.userInfo({}, res => {
						if (res.status) {
							const params = {
								payType: '1',
								cardNo: data.vcard_no,
								cardPwd: data.pwd
							}
							this.$api.sandCardQuerybalance(params, res.vCartInfo.data, res => {
								if (res) {
									this.$api.bindVCard(data, res => {

										if (res.status) {
											this.$common.successToShow(res.msg, ress => {
												this.submitStatus = false;
												uni.navigateBack({
													delta: 1
												});
											});
										} else {
											this.$common.errorToShow(res.msg);
											this.submitStatus = false;
										}
									});
								}
							});
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				}
			}
		},
		onLoad(e) {
			// this.getVcardInfo();
			this.vcard_no = e.vcardNo || '';
			if (e.ship_id) {
				//编辑
				this.id = e.ship_id;
				this.getShipInfo();
			} else {
				// //添加
				// this.pickerValue = this.region[0]+ " "+ this.region[1]+" "+this.region[2];
				// uni.setNavigationBarTitle({
				// 	title: '添加地址'
				// });
			}
		},
		onBackPress() {
			if (this.$refs.areaPicker.pickerShow) {
				this.$refs.areaPicker.closePicker();
				return true;
			}
		},

	}
</script>

<style>
	.user-head {
		height: 100upx;
	}

	.user-head-img {
		height: 90upx;
		width: 90upx;
		border-radius: 50%;
	}

	.cell-hd-title {
		color: #333;
	}

	.cell-item-bd {
		color: #666;
		font-size: 26upx;
	}

	.button-bottom .btn {
		width: 50%;
	}

	.cell-bd-input {
		width: 100%;
	}

	/* #ifdef MP-ALIPAY */
	input {
		font-size: 24upx;
	}

	/* #endif */
</style>
